<template>
	<view class="content">
		<my-header></my-header>
		<swiper class="swiper" :indicator-dots="indicatorDots" :display-multiple-items='1.4' :interval="interval"
			next-margin='20px' previous-margin='20px' :duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import { ref,reactive,toRefs } from 'vue'
	export default {
		setup(ctx){
			const indicatorDots = ref(true)
			const autoplay = ref(true)
			const interval = ref(2000)
			const duration = ref(500)
			return{
				autoplay,
				interval,
				duration,
			}
		}
	}
</script>

<style lang="scss">
	.swiper{
		width: 100%;
		height: 300px;
		.swiper-item{
			height: 100%;
		}
	}
	.uni-bg-red{
		background: red;
	}
	.uni-bg-green{
		background: green;
	}
	.uni-bg-blue{
		background: blue;
	}
</style>
